<template>
  <!-- 测试骨架 -->
  <!-- <Skeleton width="80" height="20" background="red" />
  <Skeleton /> -->
  <input v-border="color" />
  <div class="container">
    <!-- 1. 左侧分类 -->
    <HomeCate />
    <!-- 2. 轮播图 -->
    <HomeBanner />
    <!-- 3. 新鲜好物 -->
    <HomeNew />
    <!-- 4. 人气推荐 -->
    <HomeHot />
    <!-- 5. 楼层组件 -->
    <HomeProd />
  </div>
</template>

<script>
import HomeCate from './components/home-category'
import HomeBanner from './components/home-banner'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeProd from './components/home-product.vue'
import { ref } from 'vue'
export default {
  components: {
    HomeCate,
    HomeBanner,
    HomeNew,
    HomeHot,
    HomeProd
  },
  setup () {
    const color = ref('blue')
    return { color }
  }
}
</script>

<style lang="less" scoped>
/**
说明：
 1. vue2使用@符号需要在前边加个~
 2. vue3不要加~
*/
// 手动导入
// @import '@/styles/var.less';
// 不能复用
// @priceColor: red;
.test {
  color: @sucColor;
  border: 2px solid @priceColor;
}
</style>
